<template>
  <div class="con-layout inviteInterview noPadBottom">
    <my-bread title="邀请面试" :goback="true" ref="head"></my-bread>
    <div class="content">
      <co-form :model="data" :rules="rules" ref="form">
        <!-- gsgw 为true 对应 item 查询数据带回-->
        <co-position
          :gsgw="true"
          label="邀约职位"
          v-model="data.yyzw"
          prop="yyzw"
          :gwbh.sync="data.zpgwid"
          :item.sync='interData'
        ></co-position>
        <div @click="dateFn">
          <co-input
            prop="msrq"
            label="面试日期"
            ref="dateComponent"
            :readonly="true"
            v-model="data.msrq"
            placeholder="请选择"
          ></co-input>
        </div>
        <co-input prop="lxr" label="联系人" v-model="data.lxr" placeholder="请输入"></co-input>
        <co-input prop="lxdh" label="联系电话" v-model="data.lxdh" placeholder="请输入"></co-input>
        <co-input prop="msdz" label="面试地址" v-model="data.msdz" placeholder="请输入"></co-input>
      </co-form>
      <div class="savebtn" @click="save">发送</div>
      <van-popup v-model="dateShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          type="datetime"
          title="面试日期"
          :min-date="minDate"
          :formatter="formatter"
          :filter="dataFilter"
          confirm-button-text="确定"
          cancel-button-text="取消"
          @confirm="confirmDate"
          @cancel="camcelDate"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import coForm from "base/form/form";
import coInput from "base/form/input";
import coSelect from "base/form/select";
import coPosition from "base/form/position1";
import { validator } from "common/js/valid";
import { removeZero, dateFormate } from "common/js/utils";
import coTextarea from "base/form/textarea/textarea";
export default {
  components: { coForm, coInput, coSelect, coTextarea, coPosition },
  data() {
    return {
      data: {
        zpgwid: "",
        yyzw: "",
        msrq: "",
        lxr: "",
        lxdh: "",
        msdz: ""
      },
      interData:{},
      rules: {
        yyzw: validator("128,least,邀约职位,false"),
        msrq: validator("64,least,面试日期,false"),
        lxr: validator("64,full,联系人,false"),
        lxdh: validator("32,lxdh,联系电话,false"),
        msdz: validator("128,full,面试地址,false")
      },
      dateShow: false,
      minDate: new Date()
    };
  },
  created() {
    this.zwEcho();
  },
  watch:{
    'interData': function(val){
      if(val){
        this.data.lxdh = val.lxdh;
        this.data.lxr = val.lxr;
        this.data.msdz = val.msdz;
      }
    }
  },
  methods: {
    // 回显职位
    zwEcho() {
      this.$http({
        url: "/dwgl/tdzwCx",
        params: {
          tdjlid: this.$route.query.tdjlid
        }
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          let data = _res.jlxx;
          if (data) {
            this.data = data;
            this.data.yyzw = data.gwmc;
            // this.data.zpgwid = data.zpgwid;
            // this.data.yyzw = data.gwmc;
          }
        } else {
          this.alert({
            type: "warning",
            message: _res.message
          });
          return false;
        }
      });
    },
    save() {
      this.$refs.form.validate(() => {
        this.$confirm("是否发送邀请面试？", "提示")
          .then(() => {
            this.$loading = true;
            this.$http({
              url: "/msgl/mstzBc",
              method: "post",
              data: {
                jlid: this.$route.query.jlid,
                tdjlid: this.$route.query.tdjlid,
                grqzid: this.$route.query.grqzid,
                ckjlid: this.$route.query.ckjlid,
                fmstzly: this.$route.query.fmstzly,
                ...this.data
              }
            })
              .finally(() => {
                this.$loading = false;
              })
              .then(res => {
                let _res = res.returnData;
                if (+_res.executeResult == 1) {
                  this.$alert({
                    message: "操作成功!",
                    cb: () => {
                      this.$router.goBack();
                    }
                  });
                } else {
                  this.$alert({
                    message: _res.message
                  });
                  return false;
                }
              });
          })
          .catch(() => {
            this.$toast("选择了取消");
          });
      });
    },
    dateFn() {
      this.dateShow = true;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${removeZero(val)}月`;
      } else if (type === "day") {
        return `${removeZero(val)}日`;
      } else if (type === "hour") {
        return `${removeZero(val)}时`;
      } else if (type === "minute") {
        return `${removeZero(val)}分`;
      }
    },
    dataFilter(type, options) {
      if (type == "minute") {
        return options.filter(item => {
          return item % 15 == 0;
        });
      }
      return options;
    },
    confirmDate(val) {
      this.dateShow = false;
      this.data.msrq = dateFormate(val); //这里需要字符串转化下
      this.$refs.dateComponent.resetValid();
    },
    camcelDate(val) {
      this.dateShow = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.con-layout {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
}
.inviteInterview {
  .content {
    // padding: 0 62px;
    /deep/ .form .weui-cells {
      margin-top: 0 !important;
    }
    /deep/ .form .weui-cells:after,
    /deep/ .form .weui-cells:before {
      color: red;
    }
  }
  .savebtn {
    background: #06a8f6;
    line-height: 83px;
    color: #ffffff;
    text-align: center;
    font-size: 33px;
    width: 60%;
    border-radius: 8px;
    margin: 40px auto 0;
  }
}
/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm,
/deep/ .van-picker__title,
/deep/ .van-picker-column {
  font-size: 30px;
}
/deep/ .van-picker__toolbar {
  height: 66px;
}
/deep/ .van-picker__title {
  line-height: 66px;
  font-size: 38px;
}
</style>
